<template>
  <div>
    <div>
      <div class="top"></div>
      <div class="flex flex-col items-center">
        <div class="font-size-1.8rem p-y-0.8rem flex items-center">
          <img src="../../assets/images/onlyLogo.png" class="w-6rem h-6rem m-r-6px" />
          {{ $t('invite.redbag.redbag') }}
        </div>
        <div class="font-size-1.4rem">{{ $t('invite.redbag.gx') }}</div>
        <div v-if="cym" class="flex items-center color-#d5b687">
          <div v-if="cym[0]" class="font-size-6rem m-r-6px">{{ cym[0] }}</div>
          <div class="p-y-1rem">
            <div class="font-size-1.8rem">{{ cym[1] }}</div>
            <div class="font-size-1.6rem">cym</div>
          </div>
        </div>
        <div v-else class="font-size-3.4rem p-y-2rem color-#d5b687">{{ t('invite.redbag.no') }}</div>
        <div class="link">
          <a class="color-#d5b687 font-size-1.6rem" href="https://t.me/teawoo_bot/teawoo">{{ $t('invite.redbag.bot') }}</a>
        </div>
        <div class="font-size-1.6rem color-#d5b687 p-t-6px p-b-12px">{{ $t('invite.redbag.buy') }}</div>
      </div>
      <div class="line"></div>
      <div class="tip">
        Получил {{ redbag.receiveNum }}/{{ redbag.num }} Всего {{ redbag.received }}/{{ redbag.total }} cym
        {{ minutes > 0 ? `Всего ${minutes} минуты` : '' }}.
      </div>
      <div>
        <div v-for="(i, index) in records" :key="i.id" class="records">
          <div class="flex items-center">
            <div class="m-r-10px">
              <Avatar :src="i.avatar" :name="i.username" />
            </div>
            <div>
              <div class="font-size-1.4rem p-b-4px">{{ i.username }}</div>
              <div class="font-size-1.2rem">{{ dayjs(i.createTime).format('HH:mm') }}</div>
            </div>
          </div>
          <div class="font-size-1.6rem flex-1 text-right">
            <div>{{ i.received }} cym</div>
            <div v-if="index == 0 && best" class="color-#f19149 m-t-6px font-size-1.2rem flex items-center justify-end">
              <img src="../../assets/images/best.png" class="w-1.4rem h-1.4rem" />
              {{ $t('invite.redbag.best') }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import dayjs from 'dayjs'

const packerState = ref(0)
const { t } = useI18n()
const route = useRoute()
const store = useAppStore()
const got = ref(true)
const redbag = ref<ApiRedbagVO>({} as ApiRedbagVO)
const best = ref(false)

const records = ref<ApiRedbagRecord[]>([])
const minutes = ref(0)

onMounted(() => {
  if (route.query.id) {
    apis.api
      .userRedbagRedbagInfo({ id: route.query.id })
      .then(d => {
        console.log('ddd', d)
        if (d) {
          redbag.value = d
          initPage()
        } else {
          showDialog({ message: t('invite.redbag.error') })
        }
      })
      .catch(e => {
        showDialog({ message: e })
      })
  } else {
    showDialog({ message: t('invite.redbag.error') })
  }
})

const setRecords = () => {
  // 如果红包已经抢完，手气最佳在最前面，其余按照时间排序
  // 如果还没有抢完，按照时间降序
  if (redbag.value.id && redbag.value.records?.length == redbag.value.num) {
    const recordList = redbag.value.records.concat([])

    minutes.value = dayjs(recordList[recordList.length - 1].createTime).diff(recordList[0].createTime, 'minutes')

    var max = recordList[0]
    // //声明了个变量 保存下标值
    var i = 0
    for (let index = 0; index < recordList.length; index++) {
      if (max.received < recordList[index].received) {
        max = recordList[index]
        i = index
      }
    }
    let item = recordList.splice(i, 1)[0] // 从数组中移除该项并获得它
    recordList.unshift(item) // 将该项插入到数组的开头
    best.value = true
    records.value = recordList
  } else {
    records.value = redbag.value.records || []
  }
}

const cym = computed(() => {
  const r = redbag.value.records?.find(x => x.userId == store.user?.id)
  if (r) {
    const cyms = [null, null]
    const receivedStr = r.received + ''
    if (receivedStr.length > 3) {
      cyms[0] = receivedStr.substring(0, receivedStr.length - 3)
      cyms[1] = receivedStr.substring(receivedStr.length - 3)
    } else {
      cyms[1] = receivedStr
    }
    return cyms
  } else {
    return null
  }
})

const initPage = () => {
  // 判断是否已经抢过
  const find = redbag.value.records?.find(x => x.userId == store.user?.id)
  if (find) {
    got.value = true
  } else {
    if (redbag.value.num == redbag.value.receiveNum) {
      got.value = true
    } else {
      got.value = false
    }
  }
  setRecords()
}
</script>

<style>
.flex-row {
  display: flex;
  flex-direction: row;
  position: relative;
}
.flex-column {
  display: flex;
  flex-direction: column;
  position: relative;
}
.packer-box {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99;
  color: rgb(235, 205, 153);
  padding: 3rem;
}

.packer-bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
}

.packer-top-box {
  width: 30rem;
  background-color: rgb(244, 94, 77);
  text-align: center;
  margin: auto;
  transform: translateY(-8rem);
  border-top-left-radius: 1.5rem;
  border-top-right-radius: 1.5rem;
  position: relative;
}

.sender-info {
  margin-top: 10rem;
  justify-content: center;
  line-height: 2rem;
  font-size: 1.8rem;
}

.sender-avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 0.5rem;
  background-color: #fff;
  margin-right: 0.5rem;
}

.packer-greeting {
  font-size: 2.4rem;
  line-height: 3rem;
  height: 6rem;
  margin: 2rem 1.5rem 10rem;
}

.arc-edge {
  position: relative;
}

.arc-edge::after {
  width: 100%;
  height: 10rem;
  position: absolute;
  left: 0;
  top: -5rem;
  z-index: 9;
  content: '';
  border-radius: 50%;
  background-color: rgb(244, 94, 77);
  box-shadow: 0 0.3rem 0.3rem 0 rgba(0, 0, 0, 0.1);
}

.packer-bottom-box {
  transform: translate(-50%, 0);
  width: 30rem;
  height: 18rem;
  border-bottom-left-radius: 1.5rem;
  border-bottom-right-radius: 1.5rem;
  overflow: hidden;
  position: absolute;
  bottom: calc(50% - 22rem);
  left: 50%;
}

.anim-ease-in {
  animation-duration: 0.5s;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}

.anim-out-top {
  animation-name: slideOutTop;
}

.anim-out-bottom {
  animation-name: slideOutBottom;
}

.anim-fade-out {
  animation-name: fadeOut;
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes slideOutTop {
  from {
    transform: translateY(-8rem);
  }

  to {
    transform: translateY(-200%);
  }
}

@keyframes slideOutBottom {
  from {
    transform: translate(-50%, 0);
  }

  to {
    transform: translate(-50%, 200%);
  }
}

.arc-bottom-edge {
  position: relative;
}

.arc-bottom-edge::after {
  width: 120%;
  height: 10rem;
  position: absolute;
  left: -10%;
  top: -5rem;
  z-index: 8;
  content: '';
  border-radius: 50%;
  box-shadow: 0 3rem 0 0 rgb(242, 85, 66);
}

.packer-bottom-bg {
  background-color: rgb(242, 85, 66);
  height: 14rem;
  margin-top: 5rem;
}

.packer-btn {
  border-radius: 50%;
  width: 10rem;
  height: 10rem;
  line-height: 10rem;
  font-size: 4rem;
  text-align: center;
  color: #333;
  background-color: rgb(235, 205, 153);
  box-shadow: 0 0 0.3rem 0 rgba(0, 0, 0, 0.1);
}
.packer-btn-pos {
  transform: translateX(-50%);
  position: absolute;
  left: 50%;
  z-index: 10;
  bottom: -10rem;
}
.packer-btn-front {
  position: absolute;
  top: 0;
  transform: translateZ(0.2rem);
}
.packer-btn-middle {
  position: absolute;
  top: 0;
  border-radius: 50%;
  width: 10rem;
  height: 10rem;
  background-color: rgb(235, 180, 120);
}
.anim-rotate {
  margin-left: -5rem;
  transform-style: preserve-3d;
  animation: rotate 1s linear infinite;
}
@keyframes rotate {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

.top {
  height: 10rem;
  background-color: rgb(242, 85, 66);
  border-bottom-left-radius: 18rem 6rem;
  border-bottom-right-radius: 18rem 6rem;
  border-bottom: 0.2rem solid #f7eb44;
}

.records {
  padding: 1rem 0;
  padding-right: 2rem;
  margin-left: 2.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f2f2f2;
}

.link {
  border-bottom: 1px solid #d5b687;
}
.line {
  width: 100vw;
  height: 8px;
  background-color: #f2f2f2;
}
.tip {
  font-size: 1.2rem;
  color: #adadad;
  height: 3.8rem;
  line-height: 3.8rem;
  padding-left: 6px;
  border-bottom: 1px solid #f2f2f2;
}
</style>
